<template>
  <div class="groups height_100">
    <header v-if="addType !== 5">
      <single-record
        v-if="!showGroupMember"
        type="backBox"
        name="群组"
        @click.native="backRecent"
      ></single-record>
      <single-record
        v-else
        type="backBox"
        :name="groupName"
        @click.native="backGroup"
      ></single-record>
    </header>
    <header v-else class="groupName">
      {{groupName}}
    </header>
    <div class="list self_scroll">
      <div class="grouplist" v-if="!showGroupMember">
        <single-record
          v-for="item in groupList"
          :key="item.group_id"
          :name="item.group_name"
          :imgID="item.group_img"
          :id="item.group_id"
          :fileType="6"
          @click.native="showGroup(item.group_id)"
        ></single-record>
      </div>
      <div class="groupMembers" v-else>
        <single-record
          v-for="item in groupMembersList"
          @selectUser="selectUser"
          :key="item.user_id"
          :id="item.user_id"
          :name="item.user_name"
          :ref="'user' + item.user_id"
          :type="'checkBox'"
          :imgID="item.user_img"
        ></single-record>
      </div>
    </div>
  </div>
</template>

<script>
import singleRecord from './singleRecord'
export default {
  data () {
    return {
      showGroupMember: false, // 群成员页
      groupName: '',
      realList: []
    }
  },
  components: {
    singleRecord
  },
  computed: {
    groupList () {
      // 群列表
      return this.$store.state.addressList.groupList
    },
    groupMembersList () {
      // 群成员列表
      return this.$store.state.groups.currentList
    },
    addType () {
      return this.$store.state.groups.addType
    }
  },
  watch: {
    '$store.state.chatInformation.userList': {
      deep: true,
      handler (val) {
      }
    },
    addType: {
      immediate: true,
      handler (val) {
        if (val === 3) {
          this.getGroupsList()
        } else if (val === 5) {
          this.showGroup(this.$store.state.chatInformation.current_contact.id)
        }
      }
    }
  },
  methods: {
    backRecent () {
      this.$emit('backRecent')
    },
    showGroup (groupID) {
      this.showGroupMember = true
      this.$store.dispatch('groups/getGroupMemberList', groupID).then(res => {
        this.groupName = this.tools.getContactInfo(groupID, 2).group_name
      })
    },
    backGroup () {
      this.showGroupMember = false
    },
    getGroupsList () {
      this.$store.dispatch('addressList/getGroupList')
    },
    selectUser (user, val) { // 选择成员
      this.$emit('selectUser', user, val)
    }
  }
}
</script>

<style lang="scss" scoped>
.groups {
  header.groupName{
    padding-left: 16px;
    height: 58px;
    font-size: 18px;
    font-family: PingFangSC, PingFangSC-Regular;
    color: #0D172C;
    line-height: 58px;
  }
  .list {
    height: calc(100% - 56px);
    border-top: 1px solid #ebedf3;
    &::v-deep .message {
      padding-left: 20px;
      .messageBox img.other {
        width: 40px;
        height: 40px;
      }
    }
  }
}
</style>
